    <div id="update-options">
        <div class="row-fluid">
            <div class="span3">
                <label for="check-update">{{ _( "Auto-Upgrade to" ) }}: <a href="https://github.com/XX-net/XX-Net/wiki/Auto-update" target="_blank">({{ _( "Help" ) }})</a></label>
            </div>
            <div class="span3">
                <select id="check-update">
                    <option value="dont-check">{{ _( "Do not upgrade" ) }}</option>
                    <option value="notice-stable">{{ _( "Notice stable version" ) }}</option>
                    <option value="stable">{{ _( "Stable version" ) }}</option>
                    <option value="notice-test">{{ _( "Notice test version" ) }}</option>
                    <option value="test">{{ _( "Test version" ) }}</option>
                </select>
            </div>
            <div class="span2">
                <button class="btn btn-primary ladda-button" data-style="slide-up" id="check-new-version">{{ _( "Check the latest version" ) }}</button>
            </div>
            <div class="span1" id="check-new-version-process">
            </div>
        </div> <!-- .row-fluid -->
        <div class="row-fluid version-line hide">
            <div class="span2">
                <label for="current-version-no">{{ _( "Current version" ) }}: </label>
            </div>
            <div class="span4" id="current-version-no" style="margin-top:10px"></div>
        </div> <!-- .row-fluid -->
        <div class="row-fluid version-line hide">
            <div class="span2">
                <label for="test-version-no">{{ _( "Version of the test one" ) }}: </label>
            </div>
            <div class="span4" id="test-version-no" style="margin-top:10px"></div>
            <div class="span2">
                <button class="btn btn-warning update-button ladda-button" data-style="expand-right" id="update-test-version">{{ _( "Update now" ) }}</button>
            </div>
        </div> <!-- .row-fluid -->
        <div class="row-fluid version-line hide">
            <div class="span2">
                <label for="stable-version-no">{{ _( "Version of the stable one" ) }}: </label>
            </div>
            <div class="span4" id="stable-version-no" style="margin-top:10px"></div>
            <div class="span2">
                <button class="btn btn-primary update-button ladda-button" data-style="expand-right" id="update-stable-version">{{ _( "Update now" ) }}</button>
            </div>
        </div> <!-- .row-fluid -->
        <hr/>
        <div class="row-fluid">
            <div class="span3">
                <label>
                    {{ _( "Keep old versions count" ) }}
                    <br/>
                    (0~99, 99 = {{ _( "keep all" ) }})
                </label>
            </div>
            <div class="span3">
                <input id="keep_old_ver_num" type="number" min=0 max=99 value="abc"/>
            </div>
            <div class="span3">
                <button id="save_keep_old_ver_num" class="btn btn-primary">{{ _( "Save" ) }}</button>
            </div>
        </div>
    </div> <!-- #advanced-options -->
    <hr/>

    <div class="row-fluid">
        <div class="span4">
            <label for="manual-update" class="pull-down-control">
                <i class="icon icon-chevron-right"></i> {{ _( "Manually Manage" ) }} ({{ _( "Advanced" ) }})
            </label>
        </div> <!-- .span4 -->
    </div>
    <div id="manual-update" style="display: none;">
        <br/>
        <div class="row-fluid">
            <a href="https://github.com/XX-net/XX-Net/releases" target="_blank">{{ _( "All versions download page" ) }}</a>
        </div>
        <br/>
        <div class="row-fluid">
            <div class="span3">
                <label>{{ _( "Released version" ) }} :</label>
            </div>
            <div class="span3">
                <select id="released-versions-selector">
                    <option>{{ _( "Released" ) }}</option>
                </select>
            </div>
            <div class="span3">
                <button class="btn btn-primary ladda-button" data-style="slide-up" id="manual-upgrade-to">{{ _( "Download & Change to" ) }} ({{ _( "no hash check" ) }})</button>
            </div>
        </div>
        <br>
        <div class="row-fluid">
            <div class="span3">
                <label>{{ _( "Local version" ) }} :</label>
            </div>
            <div class="span3">
                <select id="local-versions-selector">
                    <option>{{ _( "Local" ) }}</option>
                </select>
            </div>
            <div class="span3">
                <button class="btn btn-primary ladda-button" data-style="slide-up" id="set-as-local-version">{{ _( "Change to this version" ) }}</button>
            </div>
            <div class="span3">
                <button class="btn btn-warning ladda-button" data-style="slide-up" id="delete-local-version">{{ _( "Delete" ) }}</button>
            </div>
        </div>
    </div>

<script type="text/javascript">
    $('.pull-down-control').click(function () {
        var isShown = $('i.icon', this).hasClass('icon-chevron-down');
        var id = $(this).attr('for');

        if (!isShown) {
            $('i.icon', this).removeClass('icon-chevron-right');
            $('i.icon', this).addClass('icon-chevron-down');
            $('#' + id).slideDown();
        } else {
            $('i.icon', this).removeClass('icon-chevron-down');
            $('i.icon', this).addClass('icon-chevron-right');
            $('#' + id).slideUp();
        }
    });
</script>
<script type="text/javascript">
    function updateGetConfig() {
        var pageRequests = {
            'cmd': 'get_config'
        };

        $.ajax({
            type: 'GET',
            url: '/config',
            data: pageRequests,
            dataType: 'JSON',
            success: function (result) {
                $("#check-update").val(result['check_update']);
            },
            error: function () {
                displayErrorMessage();
            }
        });
    }

    $(function () {
        updateGetConfig();
    });
</script>
<script type="text/javascript">
    function versionCompare(v1, v2, options) {
        var lexicographical = options && options.lexicographical,
            zeroExtend = options && options.zeroExtend,
            v1parts = v1.split('.'),
            v2parts = v2.split('.');

        function isValidPart(x) {
            return (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/).test(x);
        }

        if (!v1parts.every(isValidPart) || !v2parts.every(isValidPart)) {
            return NaN;
        }

        if (zeroExtend) {
            while (v1parts.length < v2parts.length) v1parts.push("0");
            while (v2parts.length < v1parts.length) v2parts.push("0");
        }

        if (!lexicographical) {
            v1parts = v1parts.map(Number);
            v2parts = v2parts.map(Number);
        }

        for (var i = 0; i < v1parts.length; ++i) {
            if (v2parts.length == i) {
                return 1;
            }

            if (v1parts[i] == v2parts[i]) {
                continue;
            }
            else if (v1parts[i] > v2parts[i]) {
                return 1;
            }
            else {
                return -1;
            }
        }

        if (v1parts.length != v2parts.length) {
            return -1;
        }

        return 0;
    }

    $('#check-new-version').click(function () {
        check_new_version();
    });

    function check_new_version() {
        var button = $('#check-new-version');
        var loading = Ladda.create(button[0]);
        loading.start();

        var pageRequests = {
            'cmd': 'get_new_version'
        };

        $.ajax({
            type: 'GET',
            url: '/update',
            data: pageRequests,
            dataType: 'JSON',
            success: function (result) {
                if (result['res'] === 'success') {
                    $('#current-version-no').html(result['current_version']);
                    $('#test-version-no').html(result['test_version']);
                    $('#stable-version-no').html(result['stable_version']);

                    if (versionCompare(result['test_version'], result['current_version']) <= 0) {
                        $('#update-test-version').addClass("hide");
                    }
                    if (versionCompare(result['stable_version'], result['current_version']) <= 0) {
                        $('#update-stable-version').addClass("hide");
                    }

                    $('.version-line').removeClass('hide');
                    $('.alert').removeClass('alert-error').addClass('hide');
                } else {
                    displayErrorMessage();
                }
                $('#check-new-version-process').addClass('hide');
            },
            error: function () {
                displayErrorMessage();
                $('#check-new-version-process').addClass('hide');
            },
            complete: function () {
                loading.stop();
            }
        });
    }
</script>
<script type="text/javascript">
    $('#check-update').change(function () {
        var key   = 'check_update',
            value = $(this).val();

        if (value === 'dont-check') {
            stopUpdateCheck()
        } else {
            startUpdateCheck()
        }
        setConfig(key, value);
    });

    $('.update-button').click(function () {
        var id = $(this).attr('id');
        if (id === 'update-test-version') {
            versionToUpdate = $('#test-version-no').html();
            //window.updating_button = $('#update-test-version');
        } else if (id === 'update-stable-version') {
            versionToUpdate = $('#stable-version-no').html();
            //window.updating_button = $('#update-stable-version');
        }

        window.loading = Ladda.create(this);
        window.loading.start();

        updateVersion();
    });
</script>
<script type="text/javascript">
    $(function () {
        var pageRequests = {
            'cmd': 'get_config'
        };
        $.ajax({
            type: 'GET',
            url: '/config',
            data: pageRequests,
            dataType: 'JSON',
            success: function (result) {
                if (result['keep_old_ver_num'] >= 0 && result['keep_old_ver_num'] <= 99) {
                    $("#keep_old_ver_num").val(result['keep_old_ver_num']);
                } else {
                    //$("#keep_old_ver_num").val(-1);
                }
            },
            error: function () {
                displayErrorMessage();
            }
        });
    });

    $("#save_keep_old_ver_num").click(function () {
        keep_old_ver_num = $("#keep_old_ver_num").val();

        if (!(keep_old_ver_num >= 0 && keep_old_ver_num <= 99 )) return;

        setConfig('keep_old_ver_num', keep_old_ver_num);
    });
</script>
<script type="text/javascript">
    $('#manual-upgrade-to').click(function () {
        versionToUpdate = $("#released-versions-selector").val();

        window.loading = Ladda.create(this);
        window.loading.start();

        updateVersionWithoutHashCheck();
    });

    $('#set-as-local-version').click(function () {
        var pageRequests = {
            'cmd': 'set_localversion',
            'version': $("#local-versions-selector").val()
        };
        $.ajax({
            type: 'GET',
            url: '/update',
            data: pageRequests,
            dataType: 'JSON',
            success: function (result) {
                if (result['res'] === 'success') {
                    tip('{{ _( "Settings saved successfully." ) }}', 'success');
                } else {
                    tip('{{ _( "Settings save fail:" ) }}' + result['reason'], 'warning');
                }
            },
            error: function () {
                displayErrorMessage();
            }
        });
    });

    $('#delete-local-version').click(function () {
        var pageRequests = {
            'cmd': 'del_localversion',
            'version': $("#local-versions-selector").val()
        };
        $.ajax({
            type: 'GET',
            url: '/update',
            data: pageRequests,
            dataType: 'JSON',
            success: function (result) {
                if (result['res'] === 'success') {
                    tip('{{ _( "Deleted successfully." ) }}', 'success');
                } else {
                    tip('{{ _( "Deleting local version fail." ) }}', 'warning');
                }
            },
            error: function () {
                displayErrorMessage();
            }
        });
    });

    $("#local-versions-selector").focus(function () {
        get_localversions();
    });
    $("#released-versions-selector").focus(function () {
        get_releasedversions();
    });
    function get_localversions() {
        var pageRequests = {
            'cmd': 'get_localversions'
        };
        $.ajax({
            type: 'GET',
            url: '/update',
            data: pageRequests,
            dataType: 'json',
            success: function (result) {
                $("#local-versions-selector").html("");

                for (var i in result) {
                    var v = result[i]['v'];
                    var f = result[i]['folder'];
                    if (f !== v) {
                        v += '("' + f + '")'
                    }
                    var new_option = document.getElementById("local-versions-selector").appendChild(document.createElement("option"));
                    new_option.value = f;
                    new_option.text = v;
                }
            },
            error: function () {
                tip('{{ _( "Failed getting local versions." ) }}', 'error');
            }
        });
    }
    function get_releasedversions() {
        $.ajax({
            type: 'GET',
            url: 'https://api.github.com/repos/XX-net/XX-Net/releases',
            dataType: 'json',
            success: function (result) {
                $("#released-versions-selector").html("");

                for (var i in result) {
                    var ver = result[i]['tag_name'];
                    var new_option = document.getElementById("released-versions-selector").appendChild(document.createElement("option"));
                    new_option.value = ver;
                    new_option.text = ver;
                }
            },
            error: function () {
                tip('{{ _( "Failed getting released versions." ) }}', 'error');
            }
        });
    }
</script>
